<template>
  <view class="container">
    <!-- 内容区域 -->
    <scroll-view class="content" scroll-y>
      <!-- 基本信息 图片和标题 部分 -->
      <view class="section" v-if="detail.avatar">
        <view class="info-content">
          <image :src="detail.avatar.url" class="product-image" mode="aspectFill"></image>
        </view>
      </view>
      <view class="section">
        <view class="section-title">{{ detail.title }}</view>
        <view class="info-content">
          <text class="info-text" v-if="detail.excerpt">{{ detail.excerpt }}</text>
          <u-parse :content="detail.content"></u-parse>
        </view>
      </view>

      <!-- 产品介绍 -->
      <view class="section">
        <view class="section-title">产品介绍</view>
        <view v-if="tags.length > 10" class="material-more" @click="showMoreTags">
          查看更多
        </view>
        <view class="materials-container">
          <!-- 产品介绍 -->
          <view class="materials-grid">
            <!-- 点击查看更多后，显示所有标签 -->
            <view v-if="showAllTags" class="material-tag" v-for="tag in tags" :key="tag">{{ tag }}</view>
          </view>
        </view>  
        
        
        <view class="material-note">仅供参考，以实际评估为准</view>
      </view>

      <!-- 签约流程 -->
      <view class="section">
        <view class="section-title">签约流程</view>
        <view class="fee-content">
          <text class="fee-text">具体请咨询三斗米</text>
        </view>
      </view>

      <!-- 底部空白，确保内容不被底部按钮遮挡 -->
      <view style="height: 100rpx;"></view>
    </scroll-view>

    <!-- 底部操作栏 -->
    <view class="footer">
      <button class="footer-item" open-type="share">
        <text class="footer-icon">📤</text>
        <text class="footer-text">分享</text>
      </button>
	  <button class="footer-item" @click="setFavorite">
	    <text class="footer-icon">❤</text>
	    <text class="footer-text">收藏</text>
	  </button>
      <button class="footer-item" open-type="contact" >
        <text class="footer-icon">🎧</text>
        <text class="footer-text">客服</text>
      </button>
      <view class="consult-btn" @tap="consultNow">咨询</view>
    </view>
  </view>
</template>

<script>
import uParse from '../../components/u-parse/u-parse.vue'
const Odb=uniCloud.importObject('mydb-page')
export default {
  components: { uParse },
  data() {
    return {
      activeTab: 'seller', // 默认选中卖方
      detail: {
        title: '二手房交易服务',
        excerpt: '专业团队，全程跟进，确保您的权益。',
      },
      showAllTags: false,
      tags: [],
    }
  },
  onLoad(e) {
    this.loadData(e.productId)
  },
  methods: {
    // 返回上一页
    navigateBack() {
      uni.navigateBack()
    },
    // 点击查看更多标签
    showMoreTags() {
      this.showAllTags = !this.showAllTags
    },
    // 加载数据
    loadData(id) {
      Odb.getProductDetail({productId:id}).then(res => {
        if (res.data) {
          this.detail = res.data
          this.setLabels(res)
        }
      })
    },
    // 设置标签
    setLabels(data) {
      // 根据数据设置标签，例如：
      this.tags = data.tags || [] 
    },
    // 切换标签
    switchTab(tab) {
      this.activeTab = tab
    },
    
    // 分享功能
    share() {
      uni.showModal({
        title: '分享',
        content: '分享功能已触发',
        showCancel: false
      })
    },
    
    // 客服功能
    customerService() {
      uni.showModal({
        title: '客服',
        content: '正在连接客服...',
        showCancel: false
      })
    },
    setFavorite() {
    	if ( uniCloud.getCurrentUserInfo().tokenExpired < Date.now() ){
    		uni.navigateTo({
    			url:'/uni_modules/uni-id-pages/pages/login/login-withoutpwd'
    		})
			return
    	}
    	uni.showToast({
    		title:'收藏成功',
			icon:'success'
    	})
    },
    // 立即咨询
    consultNow() {
        uni.navigateTo({
            url: '/pages/contact/contact?productId='+this.detail._id
        })
    }
  }
}
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #f8f8f8;
}

/* 内容区域 */
.content {
  flex: 1;
}
.product-image {
  width: 100%;
  height: 400rpx;
  object-fit: cover;
  margin-bottom: 20rpx;
}
.section {
  background-color: white;
  margin-bottom: 20rpx;
  padding: 30rpx;
  position: relative;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
}

/* 基本信息样式 */
.info-content {
  line-height: 50rpx;
}

.info-text {
  display: block;
  font-size: 28rpx;
  color: #666;
  margin-bottom: 10rpx;
}

/* 标签切换样式 */
.tabs {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.tab-item {
  font-size: 28rpx;
  padding: 10rpx 20rpx;
}

.tab-item.active {
  color: #1677ff;
  font-weight: bold;
}

.tab-divider {
  color: #ddd;
  margin: 0 10rpx;
}

/* 材料标签样式 */
.materials-container {
  margin-bottom: 20rpx;
}

.materials-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
}

.material-tag {
  background-color: #f0f8ff;
  color: #1677ff;
  padding: 15rpx 25rpx;
  border-radius: 40rpx;
  font-size: 26rpx;
  display: inline-block;
}
.material-more {
  font-size: 26rpx;
  color: #1677ff;
  cursor: pointer;
  position: absolute;
  right: 15px;
  top: 15px;
}
.material-note {
  text-align: center;
  font-size: 24rpx;
  color: #999;
  margin-top: 10rpx;
  position: relative;
}

.material-note::before,
.material-note::after {
  content: '——————';
  letter-spacing: -2px;
  color: #eee;
  margin: 0 10rpx;
}

/* 费用样式 */
.fee-content {
  padding: 20rpx 0;
}

.fee-text {
  font-size: 28rpx;
  color: #666;
}
	img{
		width: 100%;
		height: auto;
	}
/* 底部操作栏 */
.footer {
  display: flex;
  align-items: center;
  padding: 20rpx 30rpx;
  background-color: white;
  border-top: 1px solid #eee;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}

.footer-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-right: 20rpx;
  background-color: transparent;
  border: none;
  outline: none;
  padding: 0 5px;
}

.footer-icon {
  font-size: 40rpx;
  margin-bottom: 5rpx;
}

.footer-text {
  font-size: 24rpx;
  color: #666;
}

.consult-btn {
  flex: 1;
  background-color: #1677ff;
  color: white;
  text-align: center;
  padding: 20rpx;
  border-radius: 40rpx;
  font-size: 32rpx;
  font-weight: bold;
}
</style>